<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>基于Threejs的高速运动动画特效|DEMO6_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/base.css" />
	<script>
		document.documentElement.className = "js";
		var supportsCssVars = function() { var e, t = document.createElement("style"); return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e };
		supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");
		</script>
</head>
<body class="cda-removeleft cda-naked cda-noimg demo-6">
		<main>
			<div class="frame">
				<div class="frame__title-wrap">
					<h1 class="frame__title">Infinite Lights</h1>
					<div class="frame__links">
						<a href="http://www.htmleaf.com/">jquery之家</a>
						<a href="http://www.htmleaf.com/html5/html5donghua/201912115862.html">返回下载页</a>
						<a href="https://github.com/Anemolo/InfiniteLights" target="_blank">GitHub</a>
					</div>
				</div>
				<div class="frame__info">提示: 点击鼠标来提高速度</div>
				<div class="frame__demos">
					<a href="index.html" class="frame__demo">interstate 1</a>
					<a href="index2.html" class="frame__demo">interstate 2</a>
					<a href="index3.html" class="frame__demo">interstate 3</a>
					<a href="index4.html" class="frame__demo">interstate 4</a>
					<a href="index5.html" class="frame__demo">interstate 5</a>
					<a href="index6.html" class="frame__demo frame__demo--current">interstate 6</a>
					<a href="index7.html" class="frame__demo">interstate 7</a>
				</div>
			</div>
			<div class="content">
				<div id="app"></div>
				<div class="content__title-wrap">
					<span class="content__pretitle">CWS Investment</span>
					<h2 class="content__title">Ascendency</h2>
					<a class="content__link" href="#">Learn more</a>
				</div>
			</div>
		</main>
		<script src="js/three.min.js"></script>
		<script src="js/postprocessing.min.js"></script>
		<script src="js/InfiniteLights.js"></script>
		<script src="js/Distortions.js"></script>
		<script>
		(function() {

			const container = document.getElementById('app');

			const options = {
				onSpeedUp: (ev) => {					
				},
				onSlowDown: (ev) => {
				},
				// mountainDistortion || LongRaceDistortion || xyDistortion || turbulentDistortion || turbulentDistortionStill || deepDistortionStill || deepDistortion
				distortion: deepDistortionStill, 
				
				length: 400,
				roadWidth: 18,
				islandWidth: 2,
				lanesPerRoad: 3,

				fov: 90,
				fovSpeedUp: 150,
				speedUp: 2,
				carLightsFade: 0.4,

				totalSideLightSticks: 50,
				lightPairsPerRoadWay: 50,

				// Percentage of the lane's width
				shoulderLinesWidthPercentage: 0.05,
				brokenLinesWidthPercentage: 0.1,
				brokenLinesLengthPercentage: 0.5,

				/*** These ones have to be arrays of [min,max].  ***/
				lightStickWidth: [0.12, 0.5],
				lightStickHeight: [1.3, 1.7],

				movingAwaySpeed: [60, 80],
				movingCloserSpeed: [-120, -160],

				/****  Anything below can be either a number or an array of [min,max] ****/

				// Length of the lights. Best to be less than total length
				carLightsLength: [400 * 0.05, 400 * 0.15],
				// Radius of the tubes
				carLightsRadius: [0.05, 0.14],
				// Width is percentage of a lane. Numbers from 0 to 1
				carWidthPercentage: [0.3, 0.5],
				// How drunk the driver is.
				// carWidthPercentage's max + carShiftX's max -> Cannot go over 1. 
				// Or cars start going into other lanes 
				carShiftX: [-0.2, 0.2],
				// Self Explanatory
				carFloorSeparation: [0.05, 1],

				colors: {
					roadColor: 0x080808,
					islandColor: 0x0a0a0a,
					background: 0x000000,
					shoulderLines: 0x131318,
					brokenLines: 0x131318,
					/***  Only these colors can be an array ***/
					leftCars: [0xFF322F, 0xA33010, 0xA81508],
					rightCars: [0xFDFDF0, 0xF3DEA0, 0xE2BB88],
					sticks: 0xFDFDF0,
				}
			};

			const myApp = new App(container, options);
			myApp.loadAssets().then(myApp.init)
		})()
		</script>
	</body>
</html>